<template>
    <el-select :placeholder="placeholder || $t('game.setting.model.name')"
               :size="size" :clearable="clearable" v-model="dataCache.modelId" @change="filterChange">
        <el-option :label="item.label" :value="item.value" :disabled="isDisabled(item.value)"
                   v-for="(item,index) in $t('game.setting.model.models')" :key="index"></el-option>
    </el-select>
</template>

<script>
export default {
    name: "PageModelOption",
    model: {
        prop: 'modelId',
        event: 'change'
    },
    props: {
        size: {
            type: String,
            default: null
        },
        modelId: {
            type: Number,
            default: null
        },
        clearable: {
            type: Boolean,
            default: true
        },
        placeholder: String
    },
    data() {
        return {
            dataCache: {
                modelId: null,
            },
        }
    },
    watch: {
        // 外部改变数据
        modelId: {
            immediate: true,
            handler: function (n, o) {
                if (n != o) {
                    this.dataCache.modelId = n;
                }
            }
        }
    },
    methods: {
        // 点击选中数据
        filterChange(modelId) {
            // 对外广播事件
            this.$emit('change', typeof modelId === 'number' ? modelId : null);
        },
        // 权限验证 (禁用【大放】【小放】)
        isDisabled(modelId) {
            if ([2, 3].indexOf(modelId) >= 0) {
                return !this.$store.getters['admin/menu/hasPermissionTo']('game.user.model');
            }
            return false;
        }
    },
}
</script>

<style scoped>

</style>
